<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>组件间的传值</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="root">
    <input type="text" v-model='inptVal'>
    <button @click="handleBtnClick">提交</button>
    <ul>
      <todo-item v-for='(item, index) of List' :key='index' 
            v-bind:content='item'
            :Index="index"
            @change="handleItemDelete">
      </todo-item>
    </ul>
  </div>
  
  <script>
    var TodoItem = {
      props: ['content', 'index'], // 从父组件接收数据
      template: '<li @click="handleItemClick">{{content}}</li>', // 定义自组件模版
      methods: {
        handleItemClick: function() {
          this.$emit('change', this.index) 
          // 子组件向父组件传值(触发事件)，同时传递一个参数
          // 向上一层触发事件，自组件触发的事件，父组件正好在监听
        }
      }
    };
    var root = new Vue({
      el: '#root',
      components: {TodoItem}, // 子组件注册
      data: { // 定义父组件数据
        inptVal: '',
        List: []
      },
      methods: {
        handleBtnClick: function() {
          this.List.push(this.inptVal)
          this.inptVal = ''
        },
        handleItemDelete: function(index) {
          console.log(index)
          this.List.splice(index, 1)
        }
      }
    })
  </script>
</body>
</html>